CSS
HTML
Een super-eenvoudig html-bestand ziet er als volgt uit:
<!doctype html>
<html lang="en-US">
<head>
<title>Fox</title>
</head>
<body>
the quick brown fox jumps over the lazy dog.
</body>
</html>
Als je dit bestand met een browser laat zien, zie je zoiets als
De layout past zich aan aan de breedte van de viewport
Je kunt veel meer tekens tonen dan alleen maar de letters van het alfabet. Hier is een voorbeeld. De hml-code ziet er als volgt uit:
<!doctype html>
<html lang="en-US">
<head>
<title>Tekens</title>
</head>
<body>
THE QUICK BROWN FOX JUMPS OVER THE LAZY DOG.
the quick brown fox jumps over the lazy dog.
!?;éèëñç
αβγδε
ηθζικ
λμνξο
πρσςτ
υφχψω
ΓΔΘΛΞ
ΠΣΦΨΩ
אℵøØ
ℕℤℚℝℂℍ
¼½¾⅕⅖⅙⅛
+ −×÷
√∛∜
= ≠ ≈ ≡
< >
&✓✗
➀➁➂➃➄
➅➆➇➈➉
⑪⑫⑬⑭⑮
⑯⑰⑱⑲⑳
➊➋➌➍➎
➏➐➑➒➓
$£€¥
✉✉✈⛟ ⛴
©®
□▵
♠♥♡♦♢♣
♔♕♖♗♘♙
♚♛♜♝♞♟
</body>
</html>
In dit bovenstaand voorbeeld staat alle tekst tussen de tags <body> en </body>, met andere woorden: in het body-element. Als het aantal tekens te lang is om binnen de breedte van het body-element te passen, wordt de regel afgebroken en op een volgende regel vervolgd. Als we het browser-venster iets breder maken, wordt de regels langer, en wordt de tekst op andere plaatsen afgebroken. In onderstaand voorbeeld is dezelfde tekst niet over zes, maar over vijf regels verdeeld.
Bijvoorbeeld: <font size="6">➊</font> leidt tot ➊.
Je kunt op die manier ook de kleur van een stukje tekst veranderen.
<font size="5" color="red">➊</font> leidt tot ➊
<a>, <img>, <svg> volgen de regels die voor tekst gelden
Als je een plaatje invoegt, wordt dat door de browser geïnterpreteerd als een gewone letter. Het plaatje verschijnt tussen de andere letters in de tekst. Ook een <a>-element wordt als gewone tekst behandeld.Het html-bestand
<!doctype html>
<html lang="en-US">
<head>
<title>Inline elementen</title>
</head>
<body>
THE QUICK BROWN FOX JUMPS OVER THE LAZY DOG.
the quick brown fox jumps over the lazy dog.
!?;éèëñç
<b>αβγδε</b>
αβγδε
ηθζικ
λμνξο
πρσςτ
υφχψω
ΓΔΘΛΞ
ΠΣΦΨΩ
אℵøØ
ℕℤℚℝℂℍ
<b>ℕℤℚℝℂℍ</b>
¼½¾⅕⅖⅙⅛
+ −×÷
√∛∜
= ≠ ≈ ≡
< >
&✓✗
<img id="rood_geel" src="css_0003_rood_geel_16_16.bmp">
➀➁➂➃➄
➅➆➇➈➉
⑪⑫⑬⑭⑮
⑯⑰⑱⑲⑳
➊➋➌➍➎
➏➐➑➒➓
<svg width="16" height="16">
<rect x="0" y="0" width="16" height="16" fill="palegreen"
stroke="blue" stroke-width="1" />
</svg>
$£€¥
✉✉✈⛟ ⛴
©®
□▵
♠♥♡♦♢♣
♔♕♖♗♘♙
♚♛♜♝♞♟
<a href="#rood_geel">abc</a>
</body>
</html>
<svg width="128" height="128">
<rect x="0" y="0" width="128" height="128" fill="palegreen"
stroke="blue" stroke-width="8" />
</svg>
Inline elementen
We zagen hierboven dat de elementen img, svg en a zich met de tekst meebewegen, als de viewport groter of kleiner wordt gemaakt. Deze elementen noemen we inline-elementen.Verwijzen naar een stylesheet vanuit een HTML-bestand
In een HTML-bestand kun je een verwijzing naar een stylesheet opnemen vanuit het <head>-element. Een stylesheet moet de extensie css hebben. Daarom wordt zo'n stylesheet ook wel een css-bestand genoemd. Als het css-bestand niet bestaat, wordt de regel om het html-bestand en het css-bestand aan elkaar te koppelen, niet uitgevoerd. Ook als het css-bestand leeg is - dus wanneer het er wel is, maar er niets in staat - verandert er niets. In het volgende voorbeeld wordt vanuit een html-bestand verwezen naar een css-bestand met de naam styles.css.
<!DOCTYPE html>
<html lang="nl">
<head>
<meta charset="utf-8">
<title>HTML</title>
<link rel="stylesheet" href="styles.css">
</head>
<body>
Tekst
</body>
</html>
De inhoud van een css-bestand
Een css-bestand bevat zg. rulesets. In een ruleset wordt aangegeven hoe de een gedeelte van een html-pagina moet worden weergegeven. Een ruleset ziet er bijvoorbeeld als volgt uit:
body {
color: black;
font-family: Helvetica;
}
Een selector geeft aan welk deel van het html-bestand het betreft. Het declaratie-blok geeft aan wat er voor dat deel van het html-bestand geldig is. In dit voorbeeld staat er dat tekst getoond wordt in zwarte letters, en dat het lettertype helvetica is. Als helvetica niet beschikbaar is op de computer wordt tekst in het default lettertype van de computer getoond.
Selector
Je kunt een opmaak-eigenschap via een selector aan een element, class of id koppelen. Als je de selector aan een element wil koppelen, krijgt de selector de naam van de tag. Voor de opmaak van een class laat je de selector met een punt beginnen. Voor de opmaak van een id laat je de selector met een # beginnen. Schematisch:
| selector begint met | verwijst naar | voorbeeld |
|---|---|---|
| letter | tag | selector div is van toepassing op elk html-element div |
| . | class | selector .abc is van toepassing op elk html-element met attribuut class="abc" |
| # | id | selector #A132 is van toepassing op het html-element met attribuut id="A132" |
Block-level elementen
In de volgende html-code bevat het body-element de tekst "rood oranje geel groen lichtblauw donkerblauw violet". De woorden in deze tekst zijn omgeven door div-elementen.
<!doctype html>
<html lang="en-US">
<head>
<title>Regenboog</title>
</head>
<body>
<div class="rood">rood</div>
<div class="oranje">oranje</div>
<div class="geel">geel</div>
<div class="groen">groen</div>
<div class="lichtblauw">lichtblauw</div>
<div class="donkerblauw">donkerblauw</div>
<div class="violet">violet</div>
</body>
</html>
Een css-bestand koppelen aan een html-bestand; kleur
Om te kunnen zien wat er pecies aan de hand is, koppelen we het html-bestand aan een css-bestand.
<!doctype html>
<html lang="en-US">
<head>
<title>Regenboog</title>
<link rel="stylesheet" href="styles.css" />;
</head>
<body>
<div class="rood">rood</div>
<div class="oranje">oranje</div>
<div class="geel">geel</div>
<div class="groen">groen</div>
<div class="lichtblauw">lichtblauw</div>
<div class="donkerblauw">donkerblauw</div>
<div class="violet">violet</div>
</body>
</html>
.rood {
color: red;
}
.oranje {
color: orange;
}
.geel {
color: gold;
}
.groen {
color: green;
}
.lichtblauw {
color: skyBlue;
}
.donkerblauw {
color: blue;
}
.violet {
color: blueViolet;
}
Een ander css-bestand koppelen; achtergrondkleur
We wijzigen in het css-bestand elke color in background-color. De inhoud van het css-bestand wordt:
.rood {
background-color: red;
}
.oranje {
background-color: orange;
}
.geel {
background-color: gold;
}
.groen {
background-color: lightGreen;
}
.lichtblauw {
background-color: skyBlue;
}
.donkerblauw {
background-color: royalBlue;
}
.violet {
background-color: blueViolet;
}
content (inhoud), padding (voering), border (rand), margin (marge)
We veranderen de inhoud van het css-bestand opnieuw. Het wordt:
.rood {
background-color: red;
padding: 0.5em;
border: 0.25em solid darkred;
margin: 0.5em;
}
.oranje {
background-color: orange;
padding: 0.5em;
border: 0.25em solid orangeRed;
margin: 0.5em;
}
.geel {
background-color: yellow;
padding: 0.5em;
border: 0.25em solid gold;
margin: 0.5em;
}
.groen {
background-color: lightGreen;
padding: 0.5em;
border: 0.25em solid green;
margin: 0.5em;
}
.lichtblauw {
background-color: deepSkyBlue;
padding: 0.5em;
border: 0.25em solid dodgerBlue;
margin: 0.5em;
}
.donkerblauw {
background-color: royalBlue;
padding: 0.5em;
border: 0.25em solid blue;
margin: 0.5em;
}
.violet {
background-color: violet;
padding: 0.5em;
border: 0.25em solid darkViolet;
margin: 0.5em;
}
Hoe verandert een block-level element mee met de grootte van de viewport?
We bekijken een blick-level-element waarin een tegeltjeswijsheid is opgenomen.
<!doctype html>
<html lang="en-US">
<head>
<title>Margin Border Padding Content</title>
<link rel="stylesheet" href="styles.css">
</head>
<body>
<div class="tegel">
Onderzoekt alle dingen,
maar behoudt het goede.
</div>
</body>
</html>
.tegel {
background-color: aliceBlue;
padding: 2em;
border: 1em solid skyBlue;
margin: 1em;
}
Als je daarentegen de viewport zo smal maakt, dat de tekst niet meer op één regel past, wordt het block-element smaller, maar wordt het block-element in verticale richting langer.
Inspecteren
Als je rechtsklikt in de viewport, verschijnt een pop-up-menu waarin een menukueze voorkomt die zoiets luidt als "Inspecteren" of "Element inspecteren", of iets dergelijks. Als je als browser Firefox gebruikt, luidt de omschrijving "Inspect (Q)".
Html-code en naam stylesheet-bestand in paneel "Search HTML"
In het paneel "Search HTML" vind je de html-code. Je kunt daarin een regel aanklikken. Als je dat doet, worden in de panelen "Filter Styles" en "Layout" gegevens getoond over de aangeklikte regel (die dan een blauwe achtergrondkleur heeft). In het bovenstaande plaatje is de regel <html lang="en-US"> aangeklikt. In het Layout-planeel zie je dan dat de grootte van de hele viewport 461 × 146 pixels groot is.In het "paneel "Search HTML" zie je in het head-element welk bestand als stylesheet wordt gebruikt.
Css-eigenschappen in paneel "Filter Syles"
Als je in het "paneel "Search HTML" op de de regel <div class="tegel"> ... <-div> klikt, zie je in het paneel "Filter Styles" de css-rulesets die voor dit div-element gelden.
Box Model Properties in paneel "Layout"
Het layout-paneel toont overigens nog meer gegevens, te weten de z.g. Box Model properties.
Hoveren
Als je met de muis boven die regel blijft staan (d.w.z. boven die regel "hovert"), zie je waar dit block-level element div te vinden is in de viewport.
Tekst centreren
We gaan uit van de volgende html-code :
<!doctype html>
<html lang="en-US">
<head>
<title>Tekst centreren</title>
<link rel="stylesheet" href="styles.css">
</head>
<body>
<div class="tegel">
<div class="tegel_tekst">
Onderzoekt alle dingen, maar behoudt het goede.
</div>
</div>
</body>
</html>
</div>
</body>
</html>
.tegel {
background-color: aliceBlue;
padding: 2em;
border: 1em solid skyBlue;
margin: 1em;
}
.tegel_tekst {
max-inline-size: 20em;
margin: 0 auto;
}
Flex met horizontaal scrollen
We gaan uit van het volgende html-bestand:
<!doctype html>
<html lang="en-US">
<head>
<title>Regenboog</title>
<link rel="stylesheet" href="styles.css">
</head>
<body>
<div class="flexcontainer">
<div class="rood">rood</div>
<div class="oranje">oranje</div>
<div class="geel">geel</div>
<div class="groen">groen</div>
<div class="lichtblauw">lichtblauw</div>
<div class="donkerblauw">donkerblauw</div>
<div class="violet">violet</div>
</div>
</body>
</html>
.flexcontainer {
display: flex;
overflow-x: auto;
}
.rood {
background-color: red;
padding: 0.5em;
border: 0.25em solid darkred;
margin: 0.5em;
}
.oranje {
background-color: orange;
padding: 0.5em;
border: 0.25em solid orangeRed;
margin: 0.5em;
}
.geel {
background-color: yellow;
padding: 0.5em;
border: 0.25em solid gold;
margin: 0.5em;
}
.groen {
background-color: lightGreen;
padding: 0.5em;
border: 0.25em solid green;
margin: 0.5em;
}
.lichtblauw {
background-color: deepSkyBlue;
padding: 0.5em;
border: 0.25em solid dodgerBlue;
margin: 0.5em;
}
.donkerblauw {
background-color: royalBlue;
padding: 0.5em;
border: 0.25em solid blue;
margin: 0.5em;
}
.violet {
background-color: violet;
padding: 0.5em;
border: 0.25em solid darkViolet;
margin: 0.5em;
}
Flex met onzichtbare of half-onzichtbare blokken doorschuiven naar volgende regel
Als je in het css-bestand de declaration "overflow-x: auto;" wijzigt in "flex-wrap: wrap;" worden de onzichtbare of half-onzichtbare blokken doorgeschoven naar een volgende regel. Het css-bestand ziet er dan als volgt uit:
.flexcontainer {
display: flex;
flex-wrap: wrap;
}
.rood {
background-color: red;
padding: 0.5em;
border: 0.25em solid darkred;
margin: 0.5em;
}
.oranje {
background-color: orange;
padding: 0.5em;
border: 0.25em solid orangeRed;
margin: 0.5em;
}
.geel {
background-color: yellow;
padding: 0.5em;
border: 0.25em solid gold;
margin: 0.5em;
}
.groen {
background-color: lightGreen;
padding: 0.5em;
border: 0.25em solid green;
margin: 0.5em;
}
.lichtblauw {
background-color: deepSkyBlue;
padding: 0.5em;
border: 0.25em solid dodgerBlue;
margin: 0.5em;
}
.donkerblauw {
background-color: royalBlue;
padding: 0.5em;
border: 0.25em solid blue;
margin: 0.5em;
}
.violet {
background-color: violet;
padding: 0.5em;
border: 0.25em solid darkViolet;
margin: 0.5em;
}
Afstanden
In CSS kom je verschillende eenheden om afstanden te meten tegen. De basis-eenheden zijn:
- px = pixel
- Q = kwart millimeter
- mm = millimeter
- cm = centimeter
- in. = inch
- pt = point = 1/72 inch
- pc = pica = 12 points
Bij de meeste browsers heeft het standaard lettertype (default font-family) een lettergrootte (font-size) van 16px.
Als je geen lengte-eenheid opgeeft, wordt dat door de browser geïnterpreteerd alsof je pixels bedoelt. Anders gezegd: de default lengte-eenheid is pixels.
Een pixel is een enigszings misleidende naam.
Een css-pixel hoeft niet exact gelijk te zijn aan een beeldscherm-pixel.
Dat is met name het geval bij high-resolution (“retina”) beeldschermen.
Het hangt af van een combinatie van de browser, het operating systeem en de hardware
hoe lang een pixel werkelijk is, maar gewoonlijk is het 1 inch op het scherm.
Het is in dit verband verstandig in het head-element aan het begin van het html-bestand
de regel
<meta name="viewport" content="width=device-width, initial-scale=1.0">
op te nemen.
Dit commando voorkomt dat teksten op mobiele telefoons veel te klein worden weergegeven.
Bovenstaande eenheden worden absolute eenheden genoemd. Daarnaast heb je nog relatieve eenheden. Hiertoe behoren:
- 1 em = de font size van het huidige element; handig voor padding, width, height, or border-radius.
- 1 rem = root em = de font size van het hoogste niveau knooppunt van de DOM (Document Object Model), het root-element. Je kunt met :root verwijzen naar dit root-element.
Advies: als je erover twijfelt, kies
- rems voor font size
- pixels voor borders
- ems voor andere eigenschappen.
<!doctype html>
<html lang="en-US">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Rood Groen Blauw</title>
<link rel="stylesheet" href="try.css" />
</head>
<body>
<div class="flexcontainer">
<div class="rood">rood</div>
<div class="groen">groen</div>
<div class="blauw">blauw</div>
</div>
</body>
</html>
.flexcontainer {
display: flex;
flex-wrap: wrap;
}
.rood {
background-color: salmon;
padding: 0.5em;
border: 2em solid red;
margin: 0.5em;
}
.groen {
background-color: lightgreen;
padding: 0.5em;
border: 2em solid green;
margin: 0.5em;
}
.blauw {
background-color: lightblue;
padding: 0.5em;
border: 2em solid blue;
margin: 0.5em;
}
Box-sizing
Html-elementen worden weergegeven als een rechthoek die een hoogte en een breedte heeft. Deze hoogte en breedte worden vaak berekend, maar je kunt ook de hoogte opgeven met behulp van de hiervoor genoemde lengte-eenheden. Hoe de hoogte en breedte bepaald worden kun je beïnvloeden met de property block-sizing. Default heeft bock-sizing de waarde content-box. Dat betekent dat width en height betrekking hebben op de breedte en de hoogte van het content-gedeelte van het element. De waarde border-box maakt dat width en height betrekking hebben op de breedte en de hoogte van het border-gedeelte van het element. De volgende html-code bevat twee elementen. Van het ene element wordt de grootte berekend aan de hand van content-box, Van het andere element wordt de grootte bepaald aan de hand van border-box.
<!DOCTYPE html>
<html lang="nl">
<head>
<meta charset="utf-8">
<title>box-sizing</title>
<link rel="stylesheet" href="styles3.css">
</head>
<body>
<div class="boxSizingContent">
The quick brown fox jumps over the lazy dog.
</div>
<div class="boxSizingBorder">
The quick brown fox jumps over the lazy dog.
</div>
</body>
</html>
In het bijbehorende css-bestand wordt de klasse boxSizingContent gekoppeld aan de css-regel "box-sizing: content-box;" en wordt de klasse boxSizingBorder gekoppeld aan de css-regel "box-sizing: border-box;". Verder zijn er geen verschillen tussen de klassen boxSizingContent en boxSizingBorder, afgezien van het feit dat ze anders gekleurd zijn.
.boxSizingContent {
box-sizing: content-box;
width: 50%;
margin: 1em;
border: 20px solid orange;
padding: 2em;
background-color: yellow;
}
.boxSizingBorder {
box-sizing: border-box;
width: 50%;
margin: 1em;
border: 20px solid Green;
padding: 2em;
background-color: paleGreen;
}
Het resultaat in een browser ziet er als volgt uit:
In het volgende plaatje laten rode pijlen zien welke afstanden gelijk zijn aan de helft van de breedte van het browser-venster, d.i. de viewport.
Het bovenstaand plaatje laat zien dat de afstand tussen de twee rechthoekige elementen ongeveer even groot is als de afstand tussen de linkerkant van de viewport en het rechthoekige element, en ongeveer even groot als de hoogte van de letters, d.i. de lettergrootte (font-size).
Box-sizing=border-box instellen voor het hele css-bestand
Het werken met de "box-sizing: border-box"-methode wordt over het algemeen prettiger gevonden. Je hebt dan minder problemen met tekst-gedeelten die recht onder elkaar moeten staan, en niet moeten verspringen. Advies: Laat elk stylesheet beginnen met onderstaande code. Dan geldt voor de hele stylesheet dat de grootte van elk html-element wordt berekend volgens de border-box-methode.
*,
::before,
::after {
box-sizing: border-box;
}
Even hoge kolommen
Met flexbox kun je even hoge kolommen bereiken. Het html-bestand
<!DOCTYPE html>
<html lang="nl">
<head>
<meta charset="utf-8">
<title>Even hoge kolommen</title>
<link rel="stylesheet" href="styles.css">
</head>
<body>
<div class="container">
<div class="main">
Wij, die in concentratiekampen hebben geleefd,
wij zijn de gevangenen niet vergeten die door
de barakken liepen om anderen op te beuren en
te troosten, die hun laatste korst brood aan een
medegevangene schonken. Hun aantal was wellicht
klein, toch hebben deze mannen overtuigend
bewezen dat één ding de mens
niet kan worden ontnomen: de allerlaatste
menselijke vrijheid - de keuze onder alle omstandigheden
zijn eigen houding te bepalen, zijn eigen
weg te kiezen.
</div>
<div class="sidebar">
Uit "De zin van het bestaan", door
Viktor E. Frankl
</div>
</div>
</body>
</html>
met css-bestand
.container {
display: flex;
}
.main {
width: 70%;
background-color: yellow;
padding: .5em;
}
.sidebar {
width: 30%;
background-color: paleGreen;
padding: .5em;
}
heeft in de browser als resultaat:
Een enkel-raadplegen-site bouwen
Tekst niet te breed laten worden
Als je een tekst bekijkt op een groot beeldscherm, waarop je twee A4-tjes naast elkaar kunt zien, kan een tekstregel erg breed worden. Dat is niet prettig leesbaar. De volgende html-code verwijst helemaal niet naar een css-bestand:
<!doctype html>
<html lang="en-US">
<head>
<title>Geheimtalen</title>
</head>
<body>
In de moderne wereld gonst de lucht van codes.
Bij elk gesprek dat we voeren met een mobiele telefoon,
bij elk televisiekanaal waarop we afstemmen,
bij elke keer dat we geld opnemen bij een pinautomaaat,
vertrouwen we op uitgekiende versleutelingen door de computer
die evoor zorgen dat spiedende oren en ogen van anderen
niets kunnen zien of horen.
(Uit : Geheimtalen, Stephen Pincock en Mark Frary, 2007)
</body>
</html>
